import React, {Component} from 'react';
import { connect } from 'react-redux'
import { changeUiTitle } from '../../store/actions/ui'

import './mall.less';
import SideBar from './SideBar';
import { getSideBar,getSideBarListById } from "../../services";
import Main from './Main';

@connect(null,{ changeUiTitle })
class Mall extends Component {
    constructor(){
        super();
        this.state={
            sidebar:[],
            currentSidebarId:null,
            sidebarList:[]
        }
    }
    componentDidMount() {
        this.props.changeUiTitle('商城');
        getSideBar()
            .then(resp=>{
                if(resp.data.code===1&&resp.data.errorMsg==='OK'){
                    this.setState({
                        sidebar: resp.data.data,
                        currentSidebarId:resp.data.data[0].id,
                    },()=>{
                        this.getList();
                    });
                }
            })
            .catch(error=>{
                console.log(error)
            })
    }
    onItemClik=(id)=>{
        this.setState({
            currentSidebarId:id
        },()=>{
            this.getList();
        })
    };
    getList=()=>{
        getSideBarListById(this.state.currentSidebarId)
            .then(resp=>{
                if(resp.data.code===1&&resp.data.errorMsg==='OK'){
                    this.setState({
                        sidebarList:resp.data.data
                    })
                }
            })
    };
    render() {
        return (
            <div className="pro-mall-wrapper">
                <div className="sidebar">
                    <SideBar
                        sidebar={this.state.sidebar}
                        currentSidebarId={this.state.currentSidebarId}
                        onItemClik={this.onItemClik}
                    />
                </div>
                <div className="main">
                    <Main
                        List={this.state.sidebarList}
                    />
                </div>
            </div>
        );
    }
}

export default Mall;